<div class="page has-sidebar-left  height-full">

  
  <header class="blue accent-3 relative">
        <div class="container-fluid text-white">
            <div class="row p-t-b-10 ">
                <div class="col">
                    <h4>
                        <i class="icon-bullhorn"></i>
                        公告管理
                    </h4>
                </div>
            </div>
            <div class="row">
                <ul class="nav responsive-tab nav-material nav-material-white">
                    
                    
                    
                <li>
                        <a class="nav-link " href="<?php echo url('task/artical'); ?>"><i class="icon icon-list"></i>公告列表</a>
                    </li><li>
                        <a class="nav-link active"><i class="icon icon-pencil"></i> 编辑</a>
                    </li></ul>
            </div>
        </div>
    </header>
  
  
  
  
  
    <div class="container-fluid animatedParent animateOnce">
        <div class="animated fadeInUpShort go">
          <div class="container-fluid my-3">
            <div class="row">
                <div class="col-md-7 ">
                         <form  role="form" id="form1"  method="post" action="{:url('task/edit_art')}" enctype="multipart/form-data" >
                            <input type="hidden" name="id" value="{$data['id']}">
                        <div class="card no-b  no-r">
                            <div class="card-body">

                                <div class="form-row">
                                    <div class="col-md-8">
                                        <div class="form-group m-0">
                                            <label for="name" class="col-form-label s-12">公告简介</label>
                                            <input class="form-control r-0 light s-12 "  value="{$data['title']}"   name="title" required="required"  placeholder="" type="text" >
                                          
                                        </div>
                                      
                                      
                                     <div class="form-group m-0">
                                        <label for="address" class="col-form-label s-12">外部跳转地址</label>
                                        <input type="text" class="form-control r-0 light s-12"   value="{$data['url']}"   name="url"  placeholder="http: / https: ">
                                    </div>


                                      
                                      
                                                                                
                                         <div class="form-row"> 
                                      <div class="form-group col-3 m-0">
                                        <label for="inputCity" class="col-form-label s-12">排序</label>
                                        <input type="text" class="form-control r-0 light s-12" value="{$data['sort']}"  name="sort"  >
                                    </div>
                                           

                                           
                                     </div>
                                      
                                      
                                      
                                      
                                      
                                      
                                      

                     
                                      
                                      
                                      
                                      

                                    </div>
                                  
                                  
                                  
                                                             

                                  
                                  
                                  
                                  
                                  
                                  
                                  
                                    <div class="col-md-3 offset-md-1">
									
									
                                      
                                      
                                      
                                    <!--  
                                      
                                      
                                     <input type="file" id="picture" style="display:none;" class="" name="picture" multiple accept="image/png,image/gif,image/jpeg,image/jpg"/>
       
                      <span id="warp"> 
                          <input type='file' name="picture" onchange="changeImg(this)" style="display: none;"  accept = 'image/gif,image/jpeg,image/jpg,image/png' />
                          <img style="width:75px;" src="/public/static/assets/images/tianjia.png">
                      </span>               
                                      
                                 -->     
                                      
                                      
                                      
				
		<div style=" min-height: 150px; border: 2px solid rgba(0,0,0,.3); background: #fff; padding: 20px 20px; border: 2px dashed #e1e8ee; ">

            <img id="RyanImg" src="{$data['picture'] ? $data['picture']:'/public/static/assets/images/tianjia.png'} ">
            <div id="RyanDiv"></div>
        </div>
		
		
        <script type="text/javascript">            
            //判断浏览器是否支持FileReader接口
            if (typeof FileReader == 'undefined') {
                document.getElementById("RyanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
                //使选择控件不可操作
                document.getElementById("picture").setAttribute("disabled", "disabled");
            }

            //选择图片，马上预览
            function changeImg(obj) {
                var file = obj.files[0];
                
                console.log(obj);console.log(file);
                console.log("file.size = " + file.size);  //file.size 单位为byte

                var reader = new FileReader();

                //读取文件过程方法
                reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }
                reader.onerror = function (e) {
                    console.log("读取异常....");
                }
                reader.onload = function (e) {
                    console.log("成功读取....");

                    var img = document.getElementById("RyanImg");
                    img.src = e.target.result;
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(file)
            }
        </script>

		
											

                                    </div>

                                </div>

                            </div>
                            <div class="card-body">
                                <h5 class="card-title">公告详情</h5>
                                <div class="form-row">
                                
                               <textarea class="form-control r-0"  rows="5" name="content" id="content">{$data['content']}</textarea>
                          
                                </div>
                          
                            </div>
                            <hr>
                            <div class="card-body">
                                <button type="submit" class="btn btn-primary btn-lg"><i class="icon-save mr-2"></i>保存发布</button>
                            </div>
                        </div>
                    </form>
                </div>
              
              
              
              
          <div class="col-md-5">
                                  <h3>公告帮助</h3>
                                  <hr>
                                  <p>1.公告简介：尽量控制在10-15字简洁明了.</p>
                                  <p>2.外部跳转地址 / 公告详情：填写外部跳转地址则不显示公告详情 否则反之.</p>
                                  <p  style="color: #03a9f4;">Tips：跳转外部 或 公告详情 二选一即可.</p>
                                  <p>3.图片必须上传！且文件后缀不可大写.</p>
                                  <p><i class="icon-check3 text-primary   mr-3"></i> <span class="badge badge-primary">png</span> <span class="badge badge-primary">gif</span> <span class="badge badge-primary">jpeg</span> <span class="badge badge-primary">jpg</span></p>
                                  <p><i class="icon-close2 pink-text mr-3"></i> <span class="badge badge-danger">PNG</span> <span class="badge badge-danger">GIF</span> <span class="badge badge-danger">JPG</span> <span class="badge badge-danger">……</span></p>
                                 
                                  <p>4.图片建议尺寸（像素）：80*80  -  100*100   /  100*200</p>
                                  <p>5.图片建议小于200KB.</p>
            
            
                                  <h4 class="mt-5">未完待续……</h4>
                                  <hr>
								
                                  <a class="btn btn-outline-primary btn-xs">Perfect Network Service</a>
            
                              </div>    
              
              
              
              
              
              
              
              
            </div>
    </div>
    </div>
    </div>
</div>



{$code?'
<div class="col-md-6">
  <div class="alert alert-danger" id="alert" style="position:fixed;right:0px;bottom:0px;  width: 350px">
      <button type="button" class="close" data-dismiss="alert">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
      </button>
      <strong> 糟糕 !</strong> '.$code.'
  </div>
</div>

':''}